<template>
  <el-dialog
    v-model="_value"
    :class="{
      'w-dialog': true,
      'w-dialog-border': border,
      'w-dialog-hidden-header': !props.showHeader,
      'w-dialog-hidden-footer': props.fullscreen || !showFooter
    }"
    :width="width"
    :title="title"
    append-to-body
    :top="props.fullscreen ? '0vh' : '5vh'"
    :show-close="props.fullscreen ? false : true"
    :fullscreen="props.fullscreen"
    close-on-click-modal
    destroy-on-close
    close-on-press-escape
    @opened="emit('opened')"
    @closed="emit('closed')"
  >
    <template #header>
      <slot name="title" />
    </template>
    <slot />
    <template #footer>
      <div v-if="showFooter">
        <slot name="footerbtn" />
        <el-button icon="circle-close" type="warning" @click="emit('cancel')">
          {{ cancelText }}
        </el-button>
        <el-button
          v-if="showFooterOk"
          icon="circle-check"
          v-loading="okLoading"
          :disabled="okLoading"
          type="primary"
          @click="emit('ok')"
        >
          {{ okText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="commonDialog" lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: "50%"
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  noPadding: {
    type: Boolean,
    default: false
  },
  showFooterOk: {
    type: Boolean,
    default: true
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  okText: {
    type: String,
    default: "确定"
  },
  okLoading: {
    type: Boolean,
    default: false
  },
  border: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(["opened", "closed", "cancel", "ok"]);
const _value = defineModel<boolean>();
</script>

<style lang="scss">
.w-dialog-border {
  .el-dialog__header {
    border-bottom: 1px solid var(--el-border-color);
  }

  .el-dialog__footer {
    border-top: 1px solid var(--el-border-color);
  }
}

.w-dialog-hidden-footer {
  overflow-y: hidden !important;
  padding: 0px !important;

  > .el-dialog__footer {
    display: hidden !important;
    height: 0px !important;
    padding: 0px !important;
  }

  :deep(.el-dialog__title) {
    display: hidden !important;
  }

  :deep(.el-dialog__body) {
    height: calc(100vh - 8px) !important;
    padding: 0px !important;

    .el-dialog__footer {
      padding: 5px 0px !important;
    }
  }
}

.w-dialog-hidden-header {
  .el-dialog__header {
    padding: 0px !important;
  }
}

.w-dialog {
  overflow-y: hidden !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;

  .el-dialog__header {
    padding: 10px 0px;
    text-align: center;
  }

  .el-dialog__footer {
    padding: 0px 0px;
  }

  .el-dialog__body {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
</style>
